<template>
<div class="main">
    <div class="wrap">
      <div>{{all_myrest_UploadShare==null?'':(all_myrest_UploadShare.resultCode==0?ok():"晒单失败")}}</div>
        <div class="formbox">
            <form accept-charset="UTF-8" method="post" id="myForm" name="myForm" action="http://10.8.8.38:8081/lejf-game-api/upload" enctype="multipart/form-data">
                  <div class="itembox">
                    <div class="tit_cnt"><input type="text" id="tit_cnt_ipt" name="tit_cnt" v-model="shareTitle" placeholder="输入分享标题" /></div>
                  </div>
                  <div class="itembox">
                    <div class="text_cnt"><textarea name="text_cnt" id="text_cnt_area" v-model="shareContent" maxlength="200" placeholder="发表我的‘获奖感言’" ></textarea></div>
                  </div>
                  <div class="picpre">
                      <div class="picitem">
                          <div class="item" v-on:click="iptFileBindClick($event)">
                              <div class="camerabox"><img src="../assets/duoImages/xiangji.png" /></div>
                              <div class="cameratext">添加图片</div>
                          </div>
                          <input type="file" name="shareImgAAA" id="pic1" class="picipt" v-on:change="preimg($event)" />
                          <div class="shut">X</div>
                      </div>
                      <div class="picitem">
                          <div class="item" v-on:click="iptFileBindClick($event)">
                              <div class="camerabox"><img src="../assets/duoImages/xiangji.png" /></div>
                              <div class="cameratext">添加图片</div>
                          </div>
                          <input type="file" name="shareImgAAA" id="pic2" class="picipt" v-on:change="preimg($event)" />
                          <div class="shut">X</div>
                      </div>
                      <div class="picitem">
                          <div class="item" v-on:click="iptFileBindClick($event)">
                              <div class="camerabox"><img src="../assets/duoImages/xiangji.png" /></div>
                              <div class="cameratext">添加图片</div>
                          </div>
                          <input type="file" name="shareImgAAA" id="pic3" class="picipt" v-on:change="preimg($event)" />
                          <div class="shut">X</div>
                      </div>
                  </div>
                  <div class="canvasbox" style="opacity:0"><canvas id="uploadImg" style="_display:none; width:100px; height:200px;" ></canvas></div>
            </form>
        </div>
    </div>
    <div class="subbox"><button type="button" id="subbtn" v-on:click="uploadFile()">获奖分享</button></div>
    <div class="blackcover">
        <div class="onloadicon"><img src="../assets/duoImages/onloadicon.gif" /></div>
        <p>正在上传......</p>
    </div>
</div>
</template>
<script>
  import stores from './mystore.js'
  import Vue from 'vue';
  import { XButton, XInput,Group, Tab, TabItem } from 'vux'
  import { mapGetters,mapActions } from 'vuex'
  import sha1 from 'js-sha1'

  export default {
      data(){
          return {
              UploadImgTag:'',
              spellbuyProductId:'',
              shareTitle:'',
              shareContent:'',
              imageData:[],
              file:'',
              picitem_index:0,
              img_H:0,
              img_W:0,
              _URL:window.webkitURL,
              mypayload:{
              },
              buypayload:{
              },

              QueryUserPayload:{
                  url:'baseapi',
                  actionName:"QueryUserInfo",
                  postData: {
                      //mobile:"18616717008",
                      //password:"112233",
                      //treeView:"true"
                }
              },

              UploadSharePayload:{
                  url:'duodata',
                  actionName:"UploadShare",
                  postData: {
                      spellbuyProductId:'',
                      shareTitle:'',
                      shareContent:'',
                      imageData:[]
                  }
              },

          }
      },

      computed:{
/*
          all_myrest_IndexProducts(){
              var dataval=this.$store.getters.all_restful_IndexProducts;
              var testData={"myname":"dongguang"}
              if(dataval){
                  return dataval.body.indexproducts
              }else{
                  return null
              }
              //return dataval;
          },
          all_nots(){
              return this.$store.getters.all_nots
          },
          ...mapGetters([ 'evenOrOdd'
          ])
          */
          all_myrest_QueryUserInfo(){
              var dataval=this.$store.getters.all_restful_QueryUserInfo;
              if(dataval){
                  return dataval
              }else{
                  return null
              }
              //return dataval;
          },
          all_myrest_UploadShare(){
              var dataval=this.$store.getters.all_restful_UploadShare;
              if(dataval){
                  if(dataval.body.resultCode==-1){
                    this.UploadImgTag=false;
                  }else if(dataval.body.resultCode==0){
                    this.UploadImgTag=true;
                    //alert(dataval.body.resultCode)
                  }
                  //console.log("dataval.body::::::"+dataval.body)
                  return dataval.body
              }else{
                  return null
              }
              //return dataval;
          },
          all_myrest(){
              return this.$store.getters.all_logindata
          },

      },
      created (){
         // this.cntReady();
          this.iniReady();
          //console.log('hahahahhahahahah'+this.cntReady())
      },

      methods:{
          ok:function(){
            alert('晒单成功！');
            window.location.href='/#/OneIndex'
            //router.push('/OneIndex');
          },
          doesh (){
              this.$store.commit('restful_api',this.QueryUserPayload)
          },
          GetQueryString:function(name){
              var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
              var r = document.URL.split("?")[1].match(reg);
              //alert("ddd:"+window.location.search)  spellbuyProductId
              if(r!=null)return  unescape(r[2]); return null;
          },
          iniReady:function(){
              this.spellbuyProductId=this.UploadSharePayload.postData.spellbuyProductId=this.GetQueryString("spellbuyProductId");
              alert(this.UploadSharePayload.postData.spellbuyProductId)
          },
          iptFileBindClick:function(e){
              var clickEvt = jQuery.Event("click");
              var obj=e.currentTarget;
              $(obj).parent().children().eq(1).trigger(clickEvt)
          },
          preimg:function(e){
              let that=this;
              var obj=e.currentTarget;
              var _URL = window.URL || window.webkitURL;
              var ffile=obj.files[0]
              //console.log("ffile::"+ffile)
              var my_img = new Image();
              my_img.src = _URL.createObjectURL(ffile);
              my_img.onload=function(){
                  that.img_H=my_img.height;
                  that.img_W=my_img.width;
                  //console.log("hahah:img_W:"+img_W+" hahahha:img_H:"+img_H)
                  that.file=$(obj)[0].files[0];
                  //alert('fileWidth:'+file.width)
                  that.picitem_index=$(obj).parent().index();
                  var url='',imgitemele='',sourceId='';
                  sourceId=obj.id;

                  //压缩上传试验
                  //file=$(source)[0].files[0];
                  var reader = new FileReader();
                  reader.readAsDataURL(that.file);
                  reader.onload = function(e) {
                      that.createCanvas(this.result,sourceId,that.picitem_index);
                      //console.log("this.result::"+this.result+" sourceId::"+sourceId+" picitem_index::"+that.picitem_index)
                  }
              }

          },
          createCanvas:function(src,iptid,picitemIndex){
              let that=this;
              //console.log("createCanvas::---------------::11111111111111111111111")
              //console.log("src:"+src)
              var canvas = document.getElementById("uploadImg");
              var cxt = canvas.getContext('2d');
              var img = new Image();
              img.src = src;
              //alert('neww:'+img.width)
              canvas.width = 350;
              canvas.height = (that.img_H*400)/that.img_W;
              //alert('W:'+img.width)
              //canvas.height =200;
              //console.log("测试："+1)
              //console.log("img_w："+img_W)
              //console.log("img.src："+img.src)
              img.onload = function() {
                //console.log("测试："+2)
                cxt.drawImage(img, 0, 0,400,(that.img_H*400)/that.img_W);
                //console.log("测试："+3)
                if(that.file.size<=2097152 && that.file.size>1048576 ){
                  that.imageData.splice(picitemIndex,0,canvas.toDataURL("image/jpeg", 0.5));
                  that.UploadSharePayload.imageData=that.imageData;
                  $(".item").eq(picitemIndex).children().remove();
                  $(".item").eq(picitemIndex).css({"background":"url("+src+")","background-size":"cover","background-position":"center"});
                  $(".shut").eq(picitemIndex).show()
                  $(".shut").parents(".picpre").children().eq(picitemIndex+1).show();

                }else if(that.file.size<=3145728 && that.file.size>2097152){
                  that.imageData.splice(picitemIndex,0,canvas.toDataURL("image/jpeg", 0.3));
                  that.UploadSharePayload.imageData=that.imageData;
                  var preImgSrc=canvas.toDataURL("image/jpeg", 0.3)

                  $(".item").eq(picitemIndex).children().remove();
                  $(".item").eq(picitemIndex).css({"background":"url("+src+")","background-size":"cover","background-position":"center"});
                  $(".shut").eq(picitemIndex).show()
                  $(".shut").parents(".picpre").children().eq(picitemIndex+1).show();

                }else if(that.file.size>3145728){
                  alert('图片过大,请重新选择');
                  return false;
                }else{
                  that.imageData.splice(picitemIndex,0,canvas.toDataURL("image/jpeg",0.5));
                  that.UploadSharePayload.imageData=that.imageData;
                  $(".item").eq(picitemIndex).children().remove();
                  $(".item").eq(picitemIndex).css({"background":"url("+src+")","background-size":"cover","background-position":"center"});
                  $(".shut").eq(picitemIndex).show()
                  $(".shut").parents(".picpre").children().eq(picitemIndex+1).show();
                  //console.log("UploadSharePayload::===>imageData:::=======>.>>>>>>:::"+that.UploadSharePayload.imageData)
                }
                $('#'+iptid).val('');
              }





          },
          uploadFile:function(){
              this.UploadSharePayload.postData.shareTitle=this.shareTitle;
              this.UploadSharePayload.postData.shareContent=this.shareContent;
              this.UploadSharePayload.postData.imageData=this.imageData;
              this.$store.commit('restful_api',this.UploadSharePayload);
              $(".blackcover").fadeIn()
          },

        /*  cntReady(){
              console.info(3434343);    preimg
              this.$store.commit('restful_api',this.mypayload);
           },
          ...mapActions([
              'increment',
              'decrement',
              'incrementIfOdd'
          ]),
        */
      },
      components: { XButton, Group, XInput, Tab, TabItem }

  }

</script>

<style scoped>
  *{ margin:0; padding:0;}
  html,body,.main{ width:100%; height:100%;}
  body{background-color:#f4f4f4;}
  div img{ width:100%;}

  .main{ box-sizing:border-box; -webkit-box-sizing:border-box; display:box; position:relative;}
  .wrap{ background-color:#fff;}
  .formbox{ width:90%; border-radius:6px; margin:0 auto; padding:15px 0;}
  #myForm{}
  #myForm h3{ text-align:center; margin-bottom:15px;}
  .itembox{ font-size:14px; display:box; display:-webkit-box; padding:10px 0px 10px 0;}
  .itembox div:nth-child(1){ width:70px; text-align:right; _padding-right:10px;}
  .tit_cnt input,.text_cnt input{ border:none; background:none; width:100%; outline:none;}
  .tit_cnt input{ font-size:16px; color:#4c4c4c;}

  .tit_cnt,.text_cnt{ border-radius:4px; padding:3px 0; -webkit-box-flex:1; background-color:#ebebeb; padding:8px 5px 8px 8px;}

  .img_cnt{ -webkit-box-flex:1}
  .img_cnt input{ width:70%;}

  .subbox{ width:100%; text-align:center; margin-top:15px; position:fixed; left:0; bottom:60px; }
  .subbox button{ padding:15px 10px; width:100%; border:none; background-color:#db3652; color:#fff; font-size:16px;}

  textarea{ width:100%; height:80px; border:none; background:none; outline:none; color:#4c4c4c;}

  .imgpre{ display:box; display:-webkit-box;}
  .imgitem{ width:33%; padding:10px; box-sizing:border-box; -webkit-box-sizing:border-box;}

  .imgupB,.imgupC{ _display:none;}

  .login{ text-align:center; padding:10px;}


  .picpre{ display:box; display:-webkit-box; padding:10px 0;}
  .picitem{ width:33%; display:none; position:relative;}
  .picitem input{ display:none;}
  .item{ width:80%; height:90px; margin:0 auto; border:2px dashed #eee; border-radius:6px;}
  .camerabox{ width:30%; margin:0 auto; padding-top:20%;}
  .camerabox img{ width:100%;}
  .cameratext{ text-align:center; font-size:14px; color:#c4c4c4;}

  .picitem:nth-child(1){ display:block;}

  .bottombox{ background-color:#fff; margin-top:15px;}

  .shut{ width:20px; height:20px; position:absolute; top:-12px; right:0px; border:1px solid #aaa; border-radius:20px; color:#fff; text-align:center; line-height:18px; font-size:14px; display:none; background:rgba(0,0,0,0.2);  }

  .blackcover{ width:100%; height:100%; background:rgba(0,0,0,0.5); display:none; position:absolute; left:0; top:0;}
  .onloadicon{ width:10%; margin:0 auto; padding-top:60%;}
  .blackcover p{ text-align:center; color:#ccc; margin-top:15px;}

</style>
